﻿@{
    Layout = "~/Views/Shared/_Layout_RTU_well.cshtml";
    ViewBag.Title = "实时曲线";
}
<div class="xds-no-breadcrumb">
    <div class="full-height">
        <div class="full-height-scroll white-bg border-left">
            <div class="row border-bottom page-heading" style="padding:0 20px 10px 20px">
                <div class="col-sm-12">
                    <h2 style="float:left">实时曲线</h2>
                    <select id="Options" style="margin:22px 0 12px 0;float:right">
                        <option></option>
                    </select>
                    <h2 style="float:right">选择曲线参数：</h2>
                </div>
            </div>
            <div class="wrapper wrapper-content animated fadeInRight ecommerce">
                <div id="main" style="display:none;"></div>
            </div>
        </div>
    </div>
</div>

@section Styles {
    @Styles.Render("~/plugins/sweetAlertStyles")
}

@section Scripts {
    @Scripts.Render("~/bundles/echarts")
    @Scripts.Render("~/plugins/sweetAlert")
    <script type="text/javascript">
        var date = [];
        var data = [];
        var worldMapContainer = document.getElementById('main');
        var myChart = echarts.init(worldMapContainer);
        $(document).ready(function () {
            GetOptions();
            $("#Options").change(function () {
                date = [];
                data = [];
                sessionStorage.parameter = $('#Options option:selected').text();
                $.ajax({
                    url: '/Line/Initialization',
                    data: { wellid: sessionStorage.wellid, parameter: sessionStorage.parameter },
                    type: 'post',
                    async: false,
                    dataType: 'json'
                }).success(function (result) {
                    $.each(result.data, function (i, item) {
                        date.push(item["Key"]);
                        data.push(item["Value"]);
                    });
                    sessionStorage.unit = result.unit;
                    showcharts();
                }).error(function () {
                    swal({
                        title: "Welcome in Alerts!",
                        text: "The connection between server and units is not very stable. For any technical assistant, please call 1-(517)-927-5910."
                    });

                });
            });
        })
        function GetOptions() {
            $("#Options").empty();
            var url = "/Line/Parameter";
            $("<option></option>")
            .val("0")
            .text("请选择-")
            .appendTo($("#Options"));
            $.getJSON(url, function (data) {
                $.each(data.data, function (i, item) {
                    $("<option></option>")
                    .val(i)
                    .text(item)
                    .appendTo($("#Options"));
                });
            });
        }
        option = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                name: '时间',
                data: date
            },
            yAxis: {
                boundaryGap: [0, '100%'],
                type: 'value'
            },
            series: [
                {
                    name: '成交',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    stack: 'a',
                    data: data
                }
            ]
        };

        function showcharts() {
            $("#main").show()
            resizeWorldMapContainer();
            myChart.resize();
            myChart.setOption({
                xAxis: {
                    data: date
                },
                yAxis: {
                    name:sessionStorage.parameter + '（' + sessionStorage.unit + '）'
                },
                title: {
                    text: sessionStorage.parameter
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        params = params[0];
                        return params.name + ' : ' + params.value;
                    },
                    axisPointer: {
                        animation: false
                    }
                },
                series: [{
                    name: sessionStorage.parameter,
                    data: data
                }]
            });
            setInterval(function () {
                addData(true);
                myChart.setOption({
                    xAxis: {
                        data: date
                    },
                    series: [{
                        data: data
                    }]
                });
            }, 1000*60*5);;
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
        function addData(shift) {
            $.ajax({
                url: '/Line/NewLineData',
                type: 'post',
                async: false,
                dataType: 'json'
            }).success(function (result) {
                if (result.status == "0") {
                    date.push(result.data["Key"]);
                    data.push(result.data["Value"]);
                    if (shift) {
                        date.shift();
                        data.shift();
                    }
                }
            }).error(function () {
            });
        }
        //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
        var resizeWorldMapContainer = function () {
            worldMapContainer.style.width = $("#page-wrapper").width() + 'px';
            worldMapContainer.style.height = document.documentElement.clientHeight - 198 + 'px';
        };
        //用于使chart自适应高度和宽度
        window.onresize = function () {
            //重置容器高宽
            resizeWorldMapContainer();
            myChart.resize();
        };
    </script>
}


